<template>
  <div style="position: relative">
    <div class="avatar">
      <img class="img"
           :src="state.user.avatar"
           fit="scale-down" />
    </div>
    <div class="grid-content1 bg-purple-left">
      <div class="tex-cen">

        <div class="nickname">{{state.user.nickname}}</div>
        <div class="isphone"
             v-if="!state.user.phone">手机号绑定</div>
        <div class="mobile">{{state.user.phone}}</div>
        <div class="d-fix">
          <div class="sa_name">{{state.user.de_name}}</div>
          <div class="sa_name">
            <el-input v-model="state.user.salary_name"
                      placeholder="Please input password"
                      show-password
                      class="noEdit" />
          </div>
        </div>
      </div>
      <div class="bg">
        <div class="credit dfx padd-10">
          <div class="left">
            <div @click="toSeeBalance()">
              <div class="cred-tit">余额</div>
              <div class="price">
                <span class="p-str">￥</span>
                <span class="num">{{state.user.money}}</span>
              </div>
            </div>
          </div>
          <div class="right">
            <div class="bott">提现</div>
          </div>
        </div>
        <div class="ma-top">
          <div class="credit ma-top dfx padd-10">
            <div class="left">
              <div @click="toSeeIntergral()">
                <div class="cred-tit">积分</div>
                <div class="price">
                  <span class="num ju">{{state.user.integral}}</span>
                </div>
              </div>
            </div>
            <div class="right">
              <div class="ju-bu">兑换</div>
            </div>
          </div>
        </div>

        <div class="ma-top30">
          <div class="gongao ma-top"
               v-if="type == 1">
            <div class="left">
              <div class="cred-tit">
                <div class="n1">消息</div>
                <div class="n2"
                     @click="dialogVisi(1)">查看全部</div>
              </div>
            </div>
            <message :list="state.messageList"
                     :total="state.total"
                     @currentChange="currentChange"></message>
          </div>

          <div class="gongao ma-top"
               v-if="type == 2">
            <div class="left">
              <div class="cred-tit">
                <div class="n1">公告栏</div>
                <div class="n2"
                     @click="dialogVisi(2)">查看全部</div>
              </div>
            </div>
            <news :list="state.NewsList"
                  :total="state.newsTotal"
                  @currentChange="currentChange"
                  @delnews="delnews"></news>
          </div>
        </div>
      </div>
      <!-- 查看余额弹窗 -->
      <el-dialog title="查看余额"
                 append-to-body
                 destroy-on-close
                 :model-value="state.seeBalance"
                 @close="closeBalance()">
        <div class="bg">
          <div class="ma-top30">
            <div class="gongao ma-top">
              <message :list="state.moneyList"
                       :total="state.qb_total"
                       @currentChange="currentChange"
                       :pageSize="100"></message>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 查看积分弹窗 -->
      <el-dialog title="查看积分"
                 append-to-body
                 destroy-on-close
                 :model-value="state.seeIntergral"
                 @close="closeIntergral()">
        <div class="bg">
          <div class="ma-top30">
            <div class="gongao ma-top">
              <message :list="state.qb_messageList"
                       :total="state.qb_total"
                       @currentChange="currentChange"
                       :pageSize="100"></message>
            </div>
          </div>
        </div>
      </el-dialog>
      <!-- 查看任务弹窗 -->
      <el-dialog title="全部数据"
                 append-to-body
                 destroy-on-close
                 :model-value="state.dialogVisible"
                 @close="closeDialog()">
        <div class="bg">
          <div class="ma-top30">
            <div class="gongao ma-top"
                 v-if="type == 1">
              <message :list="state.qb_messageList"
                       :total="state.qb_total"
                       @currentChange="currentChange"
                       :pageSize="100"></message>
            </div>

            <div class="gongao ma-top"
                 v-if="type == 2">
              <news :list="state.qb_NewsList"
                    :total="state.qb_newsTotal"
                    @currentChange="currentChange"
                    :pageSize="100"
                    @delnews="delnews"></news>
            </div>
          </div>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { onMounted, reactive } from "vue";
import { getHomeMess, getNews, getUserInfo, getMoneyIntegralLog } from "@/request/api";
import message from "@/components/right/message";
import news from "@/components/right/news";
const state = reactive({
  seeBalance: false,
  seeIntergral: false,
  dialogVisible: false,
  messageList: [],
  total: 0,
  page: 1,
  pageSize: 5,
  newsTotal: 0,
  NewsList: [],
  qb_messageList: [],
  qb_NewsList: [],
  qb_total: 0,
  qb_newsTotal: 0,
  user: {},
  moneyList: [],
  moneytotal: 0
})
export default {
  components: {
    message,
    news
  },
  props: ['list', 'total', 'type'],
  name: "right",
  data: () => ({
    circleUr: ""
  }),
  setup (props, emit) {
    const closeDialog = () => {
      state.dialogVisible = false
    }
    const closeBalance = () => {
      state.seeBalance = false
    }
    const closeIntergral = () => {
      state.seeIntergral = false
    }
    const currentChange = (e) => {
      console.log('执行')
      if (e === state.page) {
        return false
      }
      state.page = e
      if (props.type == 1) {
        getMessage();
      } else {
        News();
      }
    }

    //通知
    const getMessage = () => {
      let param = {
        page: state.page,
        pageSize: state.pageSize
      }
      getHomeMess(param).then(res => {
        console.log(res)
        state.messageList = res.data.data;
        state.total = res.data.total

      })
    }
    //查看余额接口
    const toSeeBalance = () => {
      state.seeBalance = true
      let param = {
        type: 1,
        page: 1,
        pageSize: 10
      }
      getMoneyIntegralLog(param).then(res => {
        console.log(res)
        state.moneyList = res.data.data
        state.moneytotal = res.data.total
      })
    }
    //查看积分接口
    const toSeeIntergral = () => {
      state.seeIntergral = true
    }
    //任务弹窗
    const dialogVisi = (type) => {
      state.dialogVisible = true
      let param = {
        page: 1,
        pageSize: 100
      }
      if (type == 1) {
        getHomeMess(param).then(res => {
          state.qb_messageList = res.data.data;
          console.log(res.data.data)
          state.qb_total = res.data.total
        })
      } else {
        getNews(param).then(res => {
          state.qb_NewsList = res.data.data;
          state.qb_newsTotal = res.data.total
        })
      }
    }
    //消息
    const News = () => {
      let param = {
        page: state.page,
        pageSize: state.pageSize
      }
      getNews(param).then(res => {
        state.NewsList = res.data.data;
        state.newsTotal = res.data.total
      })
    }

    const delnews = (index) => {
      state.NewsList.splice(index, 1)
    }
    const init = () => {
      state.page = 1
      let type = localStorage.setItem('type', props.type)
      if (props.type === type) {
        return false
      }
      localStorage.getItem('type', props.type)
      if (props.type == 1) {
        getMessage();
      } else {
        News();
      }

    }

    const UserInfo = () => {
      getUserInfo().then(res => {
        state.user = res.data
        window.localStorage.setItem('user', JSON.stringify(state.user))
      })
    }
    onMounted(async () => {
      state.page = 1
      await init()
      let user = localStorage.getItem('user')
      if (typeof (user.avatar) != 'undefined') {
        state.user = JSON.parse(user)
      } else {
        UserInfo()
      }


    })
    return {
      currentChange,
      state,
      closeDialog,
      closeBalance,
      closeIntergral,
      toSeeBalance,
      toSeeIntergral,
      dialogVisi,
      UserInfo,
      delnews
    };
  }
};
</script>

<style lang="scss">
.avatar {
}
.img {
  width: 85px;
  height: 85px;
  border-radius: 50%;
  border: 3px solid #fff6f6;
}
.bg-purple-left {
  background: linear-gradient(0deg, #b1d0fc 0%, #e8f5fd 100%);
  opacity: 0.6;
  box-shadow: 0px 0px 11px 0px rgba(29, 90, 151, 0.3);
  border: 1px solid #ffffff;
  margin-top: 15px;
  position: relative;
}

.grid-content1 {
  min-height: 36px;
  border-radius: 10px;
  position: relative;
  margin-top: 43px;
  padding-bottom: 40px;
  padding-top: 65px;
}
.tex-cen {
  text-align: center;
}
.avatar {
  position: absolute;
  top: -44px;
  left: 0;
  right: 0;
  margin: auto;
  text-align: center;
  z-index: 1;
}
.nickname {
  color: #2e2f33;
  font-weight: bold;
  margin-bottom: 15px;
  font-size: 18px;
  font-family: PingFang SC;
}
.isphone {
  color: #3a3d44;
  font-size: 10px;
  border: 1px solid;
  display: inline-block;
  padding: 5px;
  border-radius: 5px;
  cursor: pointer;
}
.isphone:active {
  color: red;
}
.config {
  margin-top: 25px;
}
.sj {
  margin-right: 60px;
  color: #3a3d44;
}
.bg {
  margin-top: 25px;
  .ma-top {
    margin-top: 15px;
  }
  .dfx {
    display: flex;
  }
  .padd-10 {
    padding: 13px 20px 13px 20px;
  }
  .credit {
    background: white;
    width: 50%;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgb(109 109 109 / 8%);
    justify-content: space-between;
    .cred-tit {
      color: #0a0a0a;
      font-size: 14px;
    }
    .price {
      margin-top: 7px;
      .p-str {
        font-size: 13px;
      }
      .num {
        color: #1151d2;
        font-weight: bold;
      }
    }
    .right {
      .bott {
        background: #0047f9;
        color: white;
        font-size: 12px;
        padding: 8px 15px 8px 15px;
        border-radius: 5px;
        margin-top: 6px;
        cursor: pointer;
      }
      .bott:active {
        background: #6080d2;
      }
    }
    .ju-bu {
      background: #fd2300;
      color: white;
      font-size: 12px;
      padding: 8px 15px 8px 15px;
      border-radius: 5px;
      margin-top: 6px;
      cursor: pointer;
    }

    .ju {
      color: #fb8b79 !important;
    }

    .ju-bu:active {
      background: #c76f60;
    }
  }
  .gongao {
    background: white;
    width: 57.5%;
    margin: auto;
    border-radius: 8px;
    box-shadow: 0px 0px 10px 0px rgb(109 109 109 / 8%);
    justify-content: space-between;
    .cred-tit {
      padding: 10px 15px 10px 17px;
      font-size: 13px;
      font-weight: 600;
      display: flex;
      justify-content: space-between;
    }
    .n2 {
      cursor: pointer;
    }
    .n2:active {
      color: red;
    }
    .card {
      border-top: 1px solid #e1e8fa;
      padding: 10px 15px 10px 15px;
      .d-fix {
        display: flex;
        font-size: 14px;
        margin-bottom: 5px;
        .tit {
          margin-left: 5px;
          margin-right: 10px;
          color: #000000;
          font-weight: 600;
          width: 45%;
          white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
          overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
          text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
          -o-text-overflow: ellipsis; /* 特定浏览器前缀 */
        }
        .tit1 {
          margin-left: 5px;
          margin-right: 10px;
          color: #000000;
          font-weight: 600;
          width: 100%;
          white-space: nowrap; /* 因为设置了block，所以需要设置nowrap来确保不换行 */
          overflow: hidden; /* 超出隐藏结合width使用截取采用效果*/
          text-overflow: ellipsis; /* 本功能的主要功臣，超出部分的剪裁方式 */
          -o-text-overflow: ellipsis; /* 特定浏览器前缀 */
          cursor: pointer;
        }
        .tit1:active {
          color: red;
        }
        .time {
          font-size: 12px;
          margin-top: 2px;
        }
      }
      .desc {
        font-size: 13px;
        color: #7f7878;
        margin-top: 10px;
      }
      .desc1 {
        font-size: 13px;
        color: #7f7878;
        margin-top: 10px;
      }
    }
    .pages {
      margin-top: 20px;
      padding-bottom: 10px;
      text-align: center;
    }
  }
  .ma-top30 {
    margin-top: 20px;
  }
  .lb {
    width: 18px;
    height: 16px;
  }
}
.sa_name {
  width: 20%;
  display: block;
  text-align: left;
  line-height: 30px;
  font-weight: bold;
}
.mobile {
  margin-top: 10px;
  margin-bottom: 10px;
  font-weight: 600;
}
.d-fix {
  display: flex;
  justify-content: center;
}
.noEdit {
  input {
    background: repeat-x !important;
    border: 0;
    padding: 0;
    font-size: 26px;
    text-align: center;
    padding-bottom: 10px;
  }
}
</style>
